import {
	IconButton,
	ImageList,
	ImageListItem,
	Stack,
	Typography,
	styled,
} from '@mui/material'
import { AppContext } from '../../store/storeProvider'

import { useContext, useEffect, useState } from 'react'
import Image, {
	ImageType,
	StyledDislikeIcon,
	StyledLikeIcon,
} from '../cardlist/image'
import api from '../../api'

const StyledPrice = styled(Typography)(() => ({
	fontFamily: 'Nunito',
	fontSize: '14px',
	fontWeight: '400',
	lineHeight: '20px',
	letterSpacing: '0em',
	textAlign: 'left',
	textDecoration: 'line-through',
	color: '#1A1A1A',
}))

const StyledPriceWithDiscount = styled(Typography)(() => ({
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineHeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	color: '#F44336',
}))

const StyledFavorite = styled(Typography)(() => ({
	styleName: 'Body : S1/Regular',
	fontFamily: 'Nunito',
	fontSize: '12px',
	fontWeight: '400',
	lineHeight: '14px',
	letterSpacing: '0em',
	textAlign: 'left',
	color: '#7B8E98',
}))

const Body = () => {
	const { state } = useContext(AppContext)
	const [like, setLike] = useState(false)

	function handleClick() {
		if (state.productData?._id) {
			if (like) {
				api
					.setDislike(state.productData?._id)
					.then(() => {
						setLike(false)
					})
					.catch((err) => console.log(err))
			} else {
				api
					.setLike(state.productData?._id)
					.then(() => {
						setLike(true)
					})
					.catch((err) => console.log(err))
			}
		}
	}

	useEffect(() => {
		setLike(state.productData?.likes.includes(state.user._id) || false)
	}, [state.user._id, state.productData?.likes])

	return (
		<Stack direction={'row'} justifyContent={'space-between'}>
			<Typography>Избраное</Typography>
			<Stack>
				<Image
					_id={state.productData?._id || ''}
					type={ImageType.productCard}
					discount={state.productData?.discount || 0}
					pictures={state.productData?.pictures || ''}
				/>
			</Stack>
			<Stack>
				<ImageList
					sx={{
						display: 'flex',
						width: 80,
						height: 488,
						flexDirection: 'column',
					}}
					cols={1}
					rowHeight={80}
					gap={0}
				>
					<ImageListItem key={state.productData?._id}>
						<img
							srcSet={`${state.productData?.pictures}`}
							src={`${state.productData?.pictures}`}
							alt={state.productData?.name}
							loading='lazy'
						/>
					</ImageListItem>
				</ImageList>
			</Stack>
			<Stack
				sx={{
					display: 'flex',
					width: 343,
					height: 488,
					flexDirection: 'column',
				}}
			>
				{state.productData?.discount !== 0 ? (
					<>
						<StyledPrice>{state.productData?.price} ₽</StyledPrice>
						<StyledPriceWithDiscount>
							{state.productData?.price && state.productData.discount
								? state.productData?.price *
									((100 - state.productData.discount) / 100)
								: 0}{' '}
							₽
						</StyledPriceWithDiscount>
					</>
				) : (
					<Typography>{state.productData?.price} ₽</Typography>
				)}
				<Stack direction={'row'} alignItems={'center'} spacing={1}>
					<IconButton sx={{ gap: '10px' }} onClick={handleClick}>
						{like ? <StyledLikeIcon /> : <StyledDislikeIcon />}
						<StyledFavorite>
							{like ? 'Удалить из избранного' : 'В избранное'}
						</StyledFavorite>
					</IconButton>
				</Stack>
			</Stack>
		</Stack>
	)
}

export default Body
